<script setup>
import AvatarUsernameAccount from "@/views/my/components/AvatarUsernameAccount.vue";
import GoBackAndSearchNav from "@/components/GoBackAndSearchNav.vue";
import {Plus} from '@element-plus/icons-vue'
import {addPercentageInterval, INTERVAL_FIELD_NAME} from "@/utils/FileUtils.js";
import {FILE_URL_FIELD_NAME, fileUploadAPI, TIP_MSG_FIELD_NAME} from "@/api/file.js";
import {elErrorMessageTip, elSuccessMessageTip} from "@/utils/MessageTipUtils.js";
import {preview} from 'vue3-image-preview';
import {ref, reactive} from "vue";
import {updateAvatarBgAPI} from "@/api/user.js";
import useAccountStore from "@/store/modules/AccountStore.js";
import {useRouter} from "vue-router";

const router = useRouter()

const imgList = ref([])
const newAvatarBg = ref('')
const imgUpload = async (file, fileList) => {
  file = reactive(file)
  // fileList.value.push(file)
  fileList.value[0] = file
  file.status = 'uploading'
  // 文件上传进度计时器
  addPercentageInterval(file)
  // 文件上传
  const res = await fileUploadAPI(file.raw)
  if (res.status) {
    // 成功
    // 清除计时器
    clearInterval(file[INTERVAL_FIELD_NAME])
    elSuccessMessageTip(res[TIP_MSG_FIELD_NAME])
    file.status = 'success'
    file.percentage = 100
    file.url = res[FILE_URL_FIELD_NAME]
    newAvatarBg.value = file.url
  } else {
    // 失败
    // 清除计时器
    clearInterval(file[INTERVAL_FIELD_NAME])
    elErrorMessageTip(res[TIP_MSG_FIELD_NAME])
    file.status = 'fail'
    newAvatarBg.value = ''
  }
}
// 商品图片上传
const imgUploadHandler = (file) => {
  imgUpload(file, imgList)
}
const imgExceedHandler = (files) => {
  imgUpload({raw: files[0], percentage: 0}, imgList)
}
// 图片预览
const imgPreviewHandler = () => {
  preview({images: imgList.value, index: 0})
}
// 图片移除
const imgRemoveHandler = (index) => {
  newAvatarBg.value = ''
}

const updateAvatarBg = async () => {
  const res = await updateAvatarBgAPI(newAvatarBg.value)
  if (res) {
    useAccountStore().saveUser(res)
    router.back()
  }
}
</script>

<template>
  <div class="update-avatar-bg">
    <GoBackAndSearchNav :title="'更换头像背景'" :placeholder="true"></GoBackAndSearchNav>
    <div class="p-2 text-gray-400">效果预览</div>
    <AvatarUsernameAccount :avatar-bg="newAvatarBg"></AvatarUsernameAccount>
    <div class="p-2 text-gray-400">上传新头像</div>
    <div class="p-2">
      <el-upload
          v-model:file-list="imgList"
          list-type="picture-card"
          :auto-upload="false"
          :limit="1"
          :on-remove="imgRemoveHandler"
          :on-exceed="imgExceedHandler"
          :on-change="imgUploadHandler"
          :on-preview="imgPreviewHandler"
      >
        <el-icon>
          <Plus/>
        </el-icon>
      </el-upload>
    </div>
    <div class="mt-2 p-2">
      <van-button block
                  round
                  @click="updateAvatarBg"
                  color="linear-gradient(to right, #e2ecf7, #f56c6c, #e2ecf7)">
        确认更换头像背景
      </van-button>
    </div>
  </div>
</template>

<style scoped lang="scss">

</style>